<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree, Button } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  treeData: any[];
  expandedKeys: string[];
  selectedResourceId?: string | null;
  resourceTypeConfig: Record<string, any>;
  collapsed?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  selectedResourceId: null,
});

// Emits
const emit = defineEmits<{
  'update:selectedResourceId': [id: string];
  createResource: [];
  createSubResource: [parentId: string];
  editResource: [id: string];
  deleteResource: [id: string];
  expandChange: [keys: string[]];
}>();

// 响应式数据
const hoveredNode = ref<string | null>(null);

// 计算属性
const selectedKeys = computed(() => {
  return props.selectedResourceId
    ? [`resource-${props.selectedResourceId}`]
    : [];
});

// 工具函数
const getResourceTypeIcon = (type: string) => {
  return props.resourceTypeConfig[type]?.icon || 'ant-design:appstore-outlined';
};

const getResourceTypeColor = (type: string) => {
  return props.resourceTypeConfig[type]?.color || '#666';
};

// 事件处理
const handleSelect = (selectedKeys: any[]) => {
  if (selectedKeys.length > 0) {
    const key = selectedKeys[0];
    const resourceId = String(key).replace('resource-', '');
    emit('update:selectedResourceId', resourceId);
  }
};

const handleExpand = (expandedKeys: any[]) => {
  emit('expandChange', expandedKeys);
};

const handleCreateSubResource = (key: any) => {
  const resourceId = String(key).replace('resource-', '');
  emit('createSubResource', resourceId);
};

const handleEdit = (key: any) => {
  const resourceId = String(key).replace('resource-', '');
  emit('editResource', resourceId);
};

const handleDelete = (key: any) => {
  const resourceId = String(key).replace('resource-', '');
  emit('deleteResource', resourceId);
};

// 悬停控制方法
const showActions = (key: any) => {
  hoveredNode.value = String(key);
};

const hideActions = () => {
  hoveredNode.value = null;
};
</script>

<template>
  <div class="resource-tree-container">
    <!-- 侧边栏头部 -->
    <!-- <div class="sidebar-header" v-show="!props.collapsed">
      <div class="header-content">
        <h3>资源实例树</h3>
        <Button type="primary" size="small" @click="$emit('createResource')">
          <template #icon>
            <IconifyIcon icon="ant-design:plus-outlined" />
          </template>
          新增实例
        </Button>
      </div>
    </div> -->

    <!-- 侧边栏内容 -->
    <div class="sidebar-content" v-show="!props.collapsed">
      <Tree
        :tree-data="treeData"
        :expanded-keys="expandedKeys"
        :selected-keys="selectedKeys"
        :show-line="false"
        @select="handleSelect"
        @expand="handleExpand"
        class="custom-tree"
      >
        <template #title="{ title, icon, color, resource_type, children, key }">
          <div
            class="tree-node"
            @mouseenter="showActions(key)"
            @mouseleave="hideActions"
          >
            <div class="node-content">
              <div class="node-info">
                <span class="node_icon">
                  <Icon
                    :icon="icon || 'ant-design:file-outlined'"
                    class="node-icon"
                    :style="{
                      color: color || '#666',
                    }"
                  />
                </span>

                <span class="node-title">{{ title }}</span>
                <span v-if="children?.length" class="node-count">{{
                  children.length
                }}</span>
                <span v-if="children?.length" class="expand-hint">
                  <IconifyIcon
                    icon="ant-design:right-outlined"
                    class="expand-icon"
                  />
                </span>
              </div>
              <div class="node-actions" v-show="hoveredNode === String(key)">
                <Button
                  type="text"
                  size="small"
                  @click.stop="handleCreateSubResource(key)"
                  class="action-btn"
                  title="新增子资源"
                >
                  <IconifyIcon icon="ant-design:plus-outlined" />
                </Button>
                <Button
                  type="text"
                  size="small"
                  @click.stop="handleEdit(key)"
                  class="action-btn"
                  title="编辑资源"
                >
                  <IconifyIcon icon="ant-design:edit-outlined" />
                </Button>
                <Button
                  type="text"
                  size="small"
                  @click.stop="handleDelete(key)"
                  class="action-btn delete-btn"
                  title="删除资源"
                >
                  <IconifyIcon icon="ant-design:delete-outlined" />
                </Button>
              </div>
            </div>
          </div>
        </template>
      </Tree>
    </div>
  </div>
</template>

<style lang="less" scoped>
.resource-tree-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;

  .sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
      opacity: 0.3;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 1;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.5px;
      }

      .ant-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
          border-color: rgba(255, 255, 255, 0.5);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .anticon {
          color: white;
        }
      }
    }
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    background: #fff;

    // 调整树节点容器样式
    :deep(.ant-tree-treenode) {
      position: relative;
      margin: 2px 0;
      border-radius: 6px;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: #f5f5f5;
      }

      &.ant-tree-node-selected {
        background-color: #e6f7ff;
      }

      // 树节点内容
      .tree-node {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: transparent;
        }

        .node-content {
          display: flex;
          align-items: center;
          flex: 1;
          gap: 8px;

          .node-info {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;

            .node_icon {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 24px;
              border-radius: 4px;
              background: #f0f0f0;
              flex-shrink: 0;

              .node-icon {
                font-size: 14px;
              }
            }

            .node-title {
              font-size: 14px;
              color: #262626;
              line-height: 1.4;
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .node-count {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-width: 16px;
              height: 16px;
              padding: 0 4px;
              font-size: 11px;
              color: #8c8c8c;
              background: #f5f5f5;
              border-radius: 8px;
              line-height: 1;
            }

            .expand-hint {
              display: inline-flex;
              align-items: center;
              margin-left: 4px;

              .expand-icon {
                font-size: 10px;
                color: #bfbfbf;
              }
            }
          }
        }

        .node-actions {
          display: flex;
          align-items: center;
          gap: 2px;
          opacity: 0;
          transition: opacity 0.2s ease;

          .action-btn {
            width: 20px;
            height: 20px;
            padding: 0;
            border: none;
            background: transparent;
            color: #8c8c8c;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s ease;

            .anticon {
              font-size: 11px;
            }

            &:hover {
              color: #1890ff;
              background: #f0f8ff;
            }

            &.delete-btn:hover {
              color: #ff4d4f;
              background: #fff2f0;
            }
          }
        }

        &:hover .node-actions {
          opacity: 1;
        }
      }

      // 选中状态
      &.ant-tree-node-selected .tree-node {
        background-color: transparent;

        .node-content .node-info {
          .node_icon {
            background: #e6f7ff;
          }

          .node-title {
            color: #1890ff;
            font-weight: 500;
          }

          .node-count {
            background: #1890ff;
            color: white;
          }
        }
      }
    }
  }
  // 树节点展开/折叠图标样式
  :deep(.ant-tree-switcher) {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    color: #bfbfbf;
    background: transparent;
    border-radius: 2px;
    transition: color 0.2s ease;

    &:hover {
      color: #8c8c8c;
    }
  }

  // 确保树组件样式正确应用
  :deep(.ant-tree) {
    background: transparent;
  }

  :deep(.ant-tree-list-holder-inner) {
    .ant-tree-treenode {
      position: relative;
      background: transparent;
      border-radius: 0;
      padding: 0;
      margin: 0;
      transition: none;

      &:hover {
        background: transparent;
      }

      &.ant-tree-node-selected {
        background: transparent;
      }
    }
  }
}
</style>
